<template>
  <div class="news">
    <!-- 头部 -->
    <van-sticky>
      <myhead>
        <template #center>传智播客：黑马程序员</template>
      </myhead>
      <div class="nav">
        <span  @click="$router.go(-1)">
            <i class="van-icon van-icon-arrow-left"></i>
          返回</span
        >
        <span>图文资讯</span>
        <span></span>
      </div>
    </van-sticky>

    <!-- 新闻块 -->
    <!-- 列表 -->
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="single"
          v-for="item in newslist"
          :key="item.id"
          @click="$router.push({ path: `/NewsDetial/${item.id}` })"
        >
          <img :src="item.img_url" alt />
          <div class="right">
            <p class="content">{{ item.title }}</p>
            <p class="info">
              <span>{{ "发表时间" + item.add_time.split("T", 1) }}</span>

              <span>{{ "点击：" + item.click }}</span>
            </p>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import myhead from "../../components/myhead.vue";
import { getNewsList } from "../../apis/news";

export default {
  components: { myhead },
  data() {
    return {
      newslist: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },

  async mounted() {
    this.init();
  },
  methods: {
    onLoad() {
      // 异步更新数据
      this.init();
    },
    async init() {
      // 获取文章列表封装
      let res = await getNewsList();
      // console.log(res);
      this.newslist = res.data.message;

      console.log(this.newslist);
      this.loading = false;
      if (this.newslist.length) {
        this.refreshing = false;
        this.finished = true;
      }
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.init();
    },
  },
};
</script>
<style lang="less" scoped>
.info {
  font-size: 16px;
  padding: 5px 10px;
  color: #78c6ff;
  display: flex;
  justify-content: space-between;
}
.content {
  font-size: 14px;
  color: #8e8e8e;
  padding: 5px 10px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single {
  padding: 15px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  flex-wrap: wrap;
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
  }

  img {
    width: 85/360 * 100vw;
    height: 50/360 * 100vw;
    object-fit: cover;
    padding-left: 10px;
  }
}
.nav {
  display: flex;
  height: 50px;
  padding: 0px 10px;
  background-color: #f7f7f7;
  justify-content: space-between;
  align-items: center;
  color: #26a2ff;
  font-size: 24px;
}
</style>